<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Terry Zeng</title>

    <!-- Bootstrap Core CSS -->
    <link href="lib/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="lib/font-awesome-4/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/font.css" rel="stylesheet" type="text/css">
    <link href="lib/bdialog/b.dialog.bootstrap3.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="../lib/support/html5shiv.js"></script>
        <script src="../lib/support/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <a id="menu-toggle" href="javascript:void(0);" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
    <nav id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
            <li class="sidebar-brand"><a href="#top" >Terry Website</a></li>
            <li><a href="#top" >首页</a></li>
            <li><a href="#about" >关于</a></li>
            <li><a href="#services" >作品展示</a></li>
            <li><a href="#contact" >联系方式</a></li>
        </ul>
    </nav>

    <!-- Header -->
    <header id="top" class="header">
        <div class="bg-canvas"><canvas id='canvas'></canvas></div>
        <div class="text-vertical-center">
        	<h1 style="margin-right: 300px;">I can accept failure. </h1>
            <h1 style="margin-left: 200px;">But I can't accept not trying.</h1>
            <h3 class="subTitle">—— Michael Jordan</h3>
            <br>
            <a href="#services" class="btn btn-dark btn-lg"><i class="fa fa-arrow-down"></i> 查看作品集</a>
        </div>
    </header>

    <!-- Services -->
    <!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
    <section id="services" class="services">
        <div class="container" style="z-index: 1;">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1 works-area">
                    <h2 class="text-center">作品展示</h2>
                    <hr class="small dark">
                    <h3 class="text-center">jQuery 系列插件</h3>
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="service-item">
                                <div class="item-icon col-md-3">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-list-alt fa-stack-1x "></i>
                                    </span>
                                </div>
                                <div class="item-content col-md-9">
                                    <h3>
                                        <a href="https://terryz.gitee.io/selectpage" target="_blank">SelectPage</a>
                                    </h3>
                                    <div>
                                        <a class="github-button" href="https://github.com/terryz/selectpage" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/selectpage on GitHub">Star</a>
                                        <a class="github-button" href="https://github.com/terryz/selectpage/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/selectpage on GitHub">Fork</a>
                                    </div>
                                    <p class="text-left">简洁而强大的下拉分页选择插件，带有autocomplete、tag标签选择、分页展示、i18n国际化支持、键盘快捷操作等功能</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="service-item">
                                <div class="item-icon col-md-3">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-bars fa-stack-1x "></i>
                                    </span>
                                </div>
                                <div class="item-content col-md-9">
                                    <h3>
                                        <a href="https://terryz.gitee.io/selectmenu" target="_blank">SelectMenu</a>
                                    </h3>
                                    <div>
                                        <a class="github-button" href="https://github.com/terryz/selectmenu" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/selectmenu on GitHub">Star</a>
                                        <a class="github-button" href="https://github.com/terryz/selectmenu/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/selectmenu on GitHub">Fork</a>
                                    </div>
                                    <p class="text-left">简洁、易用、多样的菜单解决方案。包含常规菜单模式，高级菜单模式（带有autocomplete、数组分组Tabs展示等高级功能），嵌入网页模式，右键呼出菜单等模式</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.row (nested) -->

                    <div class="row" style="margin-top: 10px">
                        <div class="col-md-6 col-sm-6">
                            <div class="service-item">
                                <div class="item-icon col-md-3">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-window-restore fa-stack-1x "></i>
                                    </span>
                                </div>

                                <div class="item-content col-md-9">
                                    <h3>
                                        <a href="https://terryz.gitee.io/bdialog" target="_blank">bDialog</a>
                                    </h3>
                                    <div>
                                        <a class="github-button" href="https://github.com/terryz/bdialog" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/bdialog on GitHub">Star</a>
                                        <a class="github-button" href="https://github.com/terryz/bdialog/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/bdialog on GitHub">Fork</a>
                                    </div>
                                    <p class="text-left">基于Boostrap Modal功能增强、扩展的可多层嵌套，高定制化的弹出窗口，包含 Modal模态窗口、Alert消息对话框、Mask遮罩三种模式</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="service-item">
                                <div class="item-icon col-md-3">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-caret-square-o-right fa-stack-1x"></i>
                                    </span>
                                </div>
                                <div class="item-content col-md-9">
                                    <h3>
                                        <a href="https://terryz.gitee.io/bpage" target="_blank">bPage</a>
                                    </h3>
                                    <div>
                                        <a class="github-button" href="https://github.com/terryz/bpage" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/bpage on GitHub">Star</a>
                                        <a class="github-button" href="https://github.com/terryz/bpage/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/bpage on GitHub">Fork</a>
                                    </div>
                                    <p class="text-left">基于jQuery、Bootstrap2、3进行开发，支持页面跳转、异步页面、异步数据等多模式的独立分页插件</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="service-item">
                                <div class="item-icon col-md-3">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-folder-o fa-stack-1x"></i>
                                    </span>
                                </div>
                                <div class="item-content col-md-9">
                                    <h3>
                                        <a href="https://terryz.gitee.io/btabs" target="_blank">bTabs</a>
                                    </h3>
                                    <div>
                                        <a class="github-button" href="https://github.com/terryz/btabs" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/btabs on GitHub">Star</a>
                                        <a class="github-button" href="https://github.com/terryz/btabs/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/btabs on GitHub">Fork</a>
                                    </div>
                                    <p class="text-left">以多标签页载入页面的功能插件，可让Bootstrap的UI界面变成类似EXT，EasyUI之类的操作模式</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col-lg-10 -->
            </div>
            <!-- /.row -->
        </div>
        <div class="bg-icon"></div>
        <!-- /.container -->
    </section>

    <!-- About -->
    <section id="about" class="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>
                        <a href="https://github.com/TerryZ/frontend-develops-skill-summary" target="_blank">开发经验记录和项目推荐</a><br>
                        <a class="github-button" href="https://github.com/TerryZ/frontend-develops-skill-summary" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/js-develop-skill-summary on GitHub">Star</a>
                        <a class="github-button" href="https://github.com/TerryZ/frontend-develops-skill-summary/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/frontend-develops-skill-summary on GitHub">Fork</a>
                    </h2>
                    <p class="lead">记录了 <strong>javascript</strong>、<strong>jQuery</strong>、<strong>Vuejs</strong>、<strong>MiniProgram</strong>(微信小程序) 开发过程中的知识点和技巧，另外推荐各类型优秀的软件项目和有趣味性的文档类项目</p>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

    <section id="vue-project" class="vue-project ">
        <div class="container" >
            <h3 class="text-center head">Vuejs 系列插件</h3>
            <!-- <hr class="small dark"> -->
            <ul>
                <li>
                    <div class="vue-thumbnail">
                        <img src="image/thumbnail/v-selectpage.png" alt="">
                    </div>
                    <h3>
                        <a href="https://terryz.gitee.io/vue/#/selectpage" target="_blank">v-selectpage</a>
                    </h3>
                    <div class="text-center">
                        <a class="github-button" href="https://github.com/terryz/v-selectpage" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/v-selectpage on GitHub">Star</a>
                        <a class="github-button" href="https://github.com/terryz/v-selectpage/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/v-selectpage on GitHub">Fork</a>
                    </div>
                    <p>简洁、强大的选择器, 可分页的列表或表格展现形式, 使用标签形式的多选模式, 国际化 i18n 和服务端数据源支持</p>
                </li>
                <li>
                    <div class="vue-thumbnail">
                        <img src="image/thumbnail/v-selectmenu.png" alt="">
                    </div>
                    <h3>
                        <a href="https://terryz.gitee.io/vue/#/selectmenu" target="_blank">v-selectmenu</a>
                    </h3>
                    <div class="text-center">
                        <a class="github-button" href="https://github.com/terryz/v-selectmenu" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/v-selectmenu on GitHub">Star</a>
                        <a class="github-button" href="https://github.com/terryz/v-selectmenu/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/v-selectmenu on GitHub">Fork</a>
                    </div>
                    <p>简洁、易用、高定制化的菜单解决方案</p>
                </li>
                <li>
                    <div class="vue-thumbnail">
                        <img src="image/thumbnail/v-region.png" alt="">
                    </div>
                    <h3>
                        <a href="https://terryz.gitee.io/vue/#/region" target="_blank">v-region</a>
                    </h3>
                    <div class="text-center">
                        <a class="github-button" href="https://github.com/terryz/v-region" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/v-region on GitHub">Star</a>
                        <a class="github-button" href="https://github.com/terryz/v-region/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/v-region on GitHub">Fork</a>
                    </div>
                    <p>简洁、易用的中国行政区划选择器，包含常规表单下拉列表模式和UI下拉选择器模式；支持 “省/直辖市” - “市” - “区/县” - “乡/镇/街道” 4 级行政级别</p>
                </li>
                <li>
                    <div class="vue-thumbnail">
                        <img src="image/thumbnail/v-dialogs.png" alt="">
                    </div>
                    <h3>
                        <a href="https://terryz.gitee.io/vue/#/dialog" target="_blank">v-dialogs</a>
                    </h3>
                    <div class="text-center">
                        <a class="github-button" href="https://github.com/terryz/v-dialogs" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/v-dialogs on GitHub">Star</a>
                        <a class="github-button" href="https://github.com/terryz/v-dialogs/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/v-dialogs on GitHub">Fork</a>
                    </div>
                    <p>简洁而强大的多形态的弹出窗口，其包含了 模态窗口(Modal)、消息对话框(Alert)、遮罩(Mask)、边角提示框(Toast)等功能</p>
                </li>
                <li>
                    <div class="vue-thumbnail">
                        <img src="image/thumbnail/v-page.png" alt="">
                    </div>
                    <h3>
                        <a href="https://terryz.gitee.io/vue/#/page" target="_blank">v-page</a>
                    </h3>
                    <div class="text-center">
                        <a class="github-button" href="https://github.com/terryz/v-page" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/v-page on GitHub">Star</a>
                        <a class="github-button" href="https://github.com/terryz/v-page/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/v-page on GitHub">Fork</a>
                    </div>
                    <p>简洁、易用的独立分页插件，支持分页菜单，i18n 多语言支持</p>
                </li>
                <li>
                    <div class="vue-thumbnail">
                        <img src="image/thumbnail/v-suggest.png" alt="">
                    </div>
                    <h3>
                        <a href="https://terryz.gitee.io/vue/#/suggest" target="_blank">v-suggest</a>
                    </h3>
                    <div class="text-center">
                        <a class="github-button" href="https://github.com/terryz/v-suggest" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/v-suggest on GitHub">Star</a>
                        <a class="github-button" href="https://github.com/terryz/v-suggest/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/v-suggest on GitHub">Fork</a>
                    </div>
                    <p>基于 Vue2 的输入内容建议插件，支持键盘快速选择</p>
                </li>
                <li>
                    <div class="vue-thumbnail">
                        <img src="image/thumbnail/v-uploader.png" alt="">
                    </div>
                    <h3>
                        <a href="https://terryz.gitee.io/vue/#/upload" target="_blank">v-uploader</a>
                    </h3>
                    <div class="text-center">
                        <a class="github-button" href="https://github.com/terryz/v-uploader" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/v-uploader on GitHub">Star</a>
                        <a class="github-button" href="https://github.com/terryz/v-uploader/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/v-uploader on GitHub">Fork</a>
                    </div>
                    <p>让文件上传变得更轻松，插件支持单文件上传、批量文件上传、拖拽文件上传等功能</p>
                </li>
                <li>
                    <div class="vue-thumbnail">
                        <img src="image/thumbnail/v-playback.png" alt="">
                    </div>
                    <h3>
                        <a href="https://terryz.gitee.io/vue/#/playback" target="_blank">v-playback</a>
                    </h3>
                    <div class="text-center">
                        <a class="github-button" href="https://github.com/terryz/v-playback" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/v-playback on GitHub">Star</a>
                        <a class="github-button" href="https://github.com/terryz/v-playback/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/v-playback on GitHub">Fork</a>
                    </div>
                    <p>一个让网页播放视频更简单的 Vue2 插件</p>
                </li>
                <li>
                    <div class="vue-thumbnail">
                        <img src="image/thumbnail/v-gallery.png" alt="">
                    </div>
                    <h3>
                        <a href="https://terryz.gitee.io/vue/#/gallery" target="_blank">v-gallery</a>
                    </h3>
                    <div class="text-center">
                        <a class="github-button" href="https://github.com/terryz/v-gallery" data-icon="octicon-star" data-show-count="true" aria-label="Star terryz/v-gallery on GitHub">Star</a>
                        <a class="github-button" href="https://github.com/terryz/v-gallery/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork terryz/v-gallery on GitHub">Fork</a>
                    </div>
                    <p>基于 Vue2 ，使用画廊或轮播模式展示图片</p>
                </li>
            </ul>
        </div>
    </section>


    <!-- Call to Action -->
    <!--
    <aside class="call-to-action">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center funnyBox">
                    <i class="fa fa-arrow-up fa-3x" id="inputBtn1"></i>
                    <i class="fa fa-arrow-up fa-3x" id="inputBtn2"></i>
                    <i class="fa fa-arrow-down fa-3x" id="inputBtn3"></i>
                    <i class="fa fa-arrow-down fa-3x" id="inputBtn4"></i>
                    <i class="fa fa-arrow-left fa-3x" id="inputBtn5"></i>
                    <i class="fa fa-arrow-right fa-3x" id="inputBtn6"></i>
                    <i class="fa fa-arrow-left fa-3x" id="inputBtn7"></i>
                    <i class="fa fa-arrow-right fa-3x" id="inputBtn8"></i>
                    <i class="fa fa-plus fa-2x" id="inputBtnPlus"></i>
                    <span id="inputBtn9">B</span><span id="inputBtn10">A</span>
                </div>
            </div>
        </div>
    </aside>
    -->

    <!-- Map -->
    <!-- 
    <section id="contact" class="map bg-primary">
        < !--<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d33123.59380655086!2d119.30237864631508!3d26.075727178178443!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1szh-CN!2s!4v1502093270753" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe> - - >
        < !--<iframe src="https://ditu.amap.com/search?query=福州&city=350100&geoobj=119.273949|26.03648|119.312444|26.069945&zoom=15" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe> - - >
        <iframe src="" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
    </section> 
    -->

    <!-- Footer -->
    <footer id="contact">
        <div class="foot-container">
            <div class="text-center">
                <div class="avatar">
                    <a href="https://github.com/TerryZ" target="_blank">
                        <img src="image/Stephen-Chow.png" alt="Avatar">
                    </a>
                </div>
                <h2><strong>Terry Zeng</strong></h2>
                <a class="github-button" href="https://github.com/terryz" 
                    data-size="large" 
                    data-show-count="true" 
                    aria-label="Follow @terryz on GitHub">Follow @terryz</a>
                <hr class="small">
                <p>Come from <strong>Fuzhou, China</strong></p>
                <ul class="list-unstyled">
                    <li class="row-email">
                        <i class="fa fa-envelope-o fa-fw"></i> 
                        <a href="mailto:terry5@foxmail.com">terry5@foxmail.com</a> or 
                        <a href="mailto:terryzeng5@gmail.com" >terryzeng5@gmail.com</a>
                    </li>
                </ul>
                <hr class="small">
                <br>
                <ul class="list-inline">
                    <li>
                        <a href="https://github.com/TerryZ" target="_blank"><i class="fa fa-github fa-fw fa-3x"></i></a>
                    </li>
                    <li>
                        <a href="https://www.facebook.com/terry.zeng.35762" target="_blank"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
                    </li>
                    <li>
                        <a href="https://twitter.com/Terry_05" target="_blank"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
                    </li>
                </ul>
                <hr class="small">

                <ul class="list-inline">
                    <li><a href="https://terryz.github.io/">English site</a></li>
                    <li><a class="text-muted" href="javascript:void(0);">中文官网</a></li>
                </ul>
                <hr class="small">
                <p class="text-muted">Copyright &copy; Terry 2016 - <span id="currentYear"></span></p>
            </div>
        </div>
        <a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a>
    </footer>

<!-- jQuery -->
<script type="text/javascript" src="lib/jquery.min.js"></script>
<!-- MAP -->
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=PM1qEHwiRHoejMpI4YIah0dDpbOtYQGu&s=1"></script> -->
<!-- Bootstrap Core JavaScript -->
<script type="text/javascript" src="lib/bootstrap/3.3.7/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/bdialog/b.dialog.js"></script>
<!-- Custom Theme JavaScript -->
<script type="text/javascript" src="js/index.js"></script>

<script type="text/javascript" src="js/count.js" ></script>
<script async defer src="lib/github-buttons/buttons.min.js"></script>

</body>
</html>
